<!-- http://net.tutsplus.com/tutorials/html-css-techniques/how-to-inject-custom-html-and-css-into-an-iframe/ -->
<!doctype html>
<html>
<head>

</head>
<body>
<h1>CodeMirror: Linter Demo</h1>

<p><textarea id="code-js">var widgets = []
    function updateHints() {
    editor.operation(function(){
    for (var i = 0; i < widgets.length; ++i)
    editor.removeLineWidget(widgets[i]);
    widgets.length = 0;

    JSHINT(editor.getValue());
    for (var i = 0; i < JSHINT.errors.length; ++i) {
    var err = JSHINT.errors[i];
    if (!err) continue;
    var msg = document.createElement("div");
    var icon = msg.appendChild(document.createElement("span"));
    icon.innerHTML = "!!";
    icon.className = "lint-error-icon";
    msg.appendChild(document.createTextNode(err.reason));
    msg.className = "lint-error";
    widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
    }
    });
    var info = editor.getScrollInfo();
    var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
    if (info.top + info.clientHeight < after)
    editor.scrollTo(null, after - info.clientHeight + 3);
    }
</textarea></p>
<script src="codemirror-3.14/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror-3.14/lib/codemirror.css">
<script src="codemirror-3.14/mode/javascript/javascript.js"></script>
<script type="text/javascript">
    var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
    lineNumbers: true,
    mode: "javascript",
    gutters: ["CodeMirror-lint-markers"],
    lintWith: CodeMirror.javascriptValidator
    });
</script>
</body>
</html>